<template>
  <el-dialog @close="onClose" v-model="visible" width="800px">
    <template #header>
      <div>
        {{ title }}
      </div>
    </template>
    <div class="main">
      <el-scrollbar ref="scrollRef" height="650px" :min-size="10">
        <div class="title">基本设置</div>
        <el-form :model="formParams" disabled ref="formRef" label-width="120px">
          <el-form-item label="优惠券名称" prop="couponName">
            <el-input
              v-model="formParams.couponName"
              placeholder="请输入优惠券名称，最多16字"
              maxlength="16"
              clearable
              input-style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="名称备注" prop="remark">
            <el-input
              v-model="formParams.remark"
              placeholder="仅内部可见，最多30字"
              maxlength="30"
              clearable
              input-style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="发放总量" prop="count">
            <el-input-number
              :controls="false"
              style="width: 200px"
              v-model="formParams.count"
              :max="100000"
              :min="1"
              :precision="0"
              controls-position="right"
              placeholder="最多100000"
            />张
          </el-form-item>
          <el-form-item label="使用门槛" prop="threshold">
            <el-radio-group v-model="formParams.threshold">
              <el-radio :value="0" :label="0" size="large">无使用门槛</el-radio>
              <br />
              <el-radio :value="1" :label="1" size="large">
                订单满
                <el-input-number
                  :controls="false"
                  style="width: 200px"
                  v-model="formParams.symkValue"
                  placeholder="请输入整数"
                />
                元，可用
              </el-radio>
            </el-radio-group>
            <div> 请输入金额数且使用门槛不能低于优惠内容 </div>
          </el-form-item>
          <el-form-item label="优惠内容" prop="discountMj" v-if="formParams.type === 1">
            <div style="width: 100%">
              满减
              <el-input-number
                :controls="false"
                style="width: 200px"
                v-model="formParams.discountMj"
                controls-position="right"
                placeholder="请输入优惠内容"
              />
              元
            </div>
            <div> 优惠券面值必须大于等于 0.01 元, 且最大不能超过10 0000元 </div>
          </el-form-item>
          <el-form-item label="优惠内容" prop="discountZk" v-if="formParams.type === 2">
            <div style="width: 100%">
              打
              <el-input-number
                :controls="false"
                style="width: 200px"
                v-model="formParams.discountZk"
                :max="9.99"
                :min="0.01"
                :precision="2"
                controls-position="right"
                placeholder="请输入优惠内容"
              />
              折
            </div>
            <div> 优惠券面值必须大于等于 0.01 折, 且最大不能超过9.99折。 </div>
          </el-form-item>
          <el-form-item
            label="优惠内容"
            prop="discountsType"
            v-if="formParams.type === 3 || formParams.type === 4"
          >
            <el-form disabled :model="formParams" label-width="120px">
              <el-radio-group v-model="formParams.discountsType">
                <el-form-item prop="discountMj">
                  <el-radio :value="1" :label="1"
                    ><div style="width: 100%">
                      满减
                      <el-input-number
                        :controls="false"
                        style="width: 200px"
                        v-model="formParams.discountMj"
                        :max="100000"
                        :min="0.01"
                        :precision="2"
                        controls-position="right"
                        placeholder="请输入优惠内容"
                      />
                      元
                    </div></el-radio
                  >
                  <div> 优惠券面值必须大于等于 0.01 元, 且最大不能超过10 0000元 </div>
                </el-form-item>
                <el-form-item label="" prop="discountZk">
                  <el-radio :value="2" :label="2"
                    ><div style="width: 100%">
                      打
                      <el-input-number
                        :controls="false"
                        style="width: 200px"
                        v-model="formParams.discountZk"
                        :max="9.99"
                        :min="0.01"
                        :precision="2"
                        controls-position="right"
                        placeholder="请输入优惠内容"
                      />
                      折
                    </div></el-radio
                  >
                  <div> 优惠券面值必须大于等于 0.01 折, 且最大不能超过9.99折。 </div>
                </el-form-item>
              </el-radio-group>
            </el-form>
          </el-form-item>
          <el-form-item label="用券时间" prop="yongquanshijianRadio">
            <el-radio-group v-model="formParams.yongquanshijianRadio">
              <el-radio :value="0" :label="0" size="large">
                <div>
                  <el-date-picker
                    prop="activityTime"
                    style="width: 320px"
                    v-model="formParams.activityTime"
                    type="datetimerange"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    format="YYYY-MM-DD HH:mm"
                    value-format="x"
                    date-format="YYYY-MM-DD"
                    time-format="HH:mm"
                    :default-time="[
                      new Date(2000, 1, 1, 0, 0, 0),
                      new Date(2000, 1, 1, 23, 59, 59)
                    ]"
                  />
                </div>
              </el-radio>
              <br />
              <el-radio :value="1" :label="1" size="large">
                <div style="display: flex; align-items: center">
                  领券后立即生效，有效期：
                  <el-input-number
                    @mousewheel.native.prevent
                    :controls="false"
                    style="width: 150px; margin-right: 5px"
                    v-model="formParams.validDays"
                    :max="100000"
                    :min="1"
                    :precision="0"
                    controls-position="right"
                    placeholder="请输入整数"
                  />
                  天
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="Bottom Center prompts info"
                    placement="bottom"
                  >
                    <template #content
                      >有效期按自然天计算，举例:如设置领券后立即<br />生效日有效期2天，用户在5月21日14:00:00时<br />领取优惠券，则该优惠券的可用时间为5月21日<br />的14:00:00至5月22日的23:59:59。</template
                    >
                    <el-icon size="18"><QuestionFilled /></el-icon>
                  </el-tooltip>
                </div>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="title">发放和领取设置</div>
          <el-form-item label="每人限领次数" prop="receiveCount">
            <el-input-number :controls="false" v-model="formParams.receiveCount" />
            次
          </el-form-item>
          <div>参与条件</div>
          <el-form-item label="参与点位" prop="position">
            <el-radio-group v-model="formParams.position">
              <el-radio :value="0" :label="0" size="large"> 全部点位 </el-radio>
              <br />
              <el-radio :value="1" :label="1" size="large">
                指定点位
                <el-select
                  v-model="formParams.positionIdList"
                  multiple
                  fit-input-width
                  collapse-tags
                  collapse-tags-tooltip
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in positionOptions"
                    :key="item.positionId"
                    :label="item.positonName"
                    :value="item.positionId"
                  />
                </el-select>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="参与用户" prop="clientStatus">
            <el-radio-group v-model="formParams.clientStatus">
              <el-radio :value="1" :label="1" size="large"> 全部用户 </el-radio>
              <br />
              <el-radio :value="2" :label="2" size="large"> 新注册用户（未下单的用户） </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="适用套餐" prop="combo">
            <el-radio-group v-model="formParams.combo">
              <el-radio :value="0" :label="0" size="large"> 全部套餐可用 </el-radio>
              <br />
              <el-radio :value="1" :label="1" size="large">
                指定套餐可用
                <el-select
                  v-model="formParams.comboIdList"
                  :multiple="formParams.type !== 3"
                  fit-input-width
                  collapse-tags
                  collapse-tags-tooltip
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in goodsOptions"
                    :key="item.comboId"
                    :label="item.name"
                    :value="item.comboId"
                  />
                </el-select>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="使用规则" prop="rule">
            <div style="width: 100%">
              <el-input
                v-model="formParams.rule"
                style="width: 300px"
                :autosize="{ minRows: 3, maxRows: 8 }"
                type="textarea"
                maxlength="1000"
                show-word-limit
              />
            </div>
            <div style="width: 330px">
              <div class="textarea-header">
                <span>示例</span>
                <el-link
                  :underline="false"
                  type="primary"
                  v-copyText="TEXT_INFO"
                  v-copyText:callback="copyTextSuccess"
                  >复制</el-link
                >
              </div>
              <div class="textarea-info"
                >1 ． 满 减 优 惠 券 ；<br />
                2 ． 部 分 订 单 商 品 金 额 满 1 2 元 可 用 ；<br />
                3 ． 有 效 期 至 2023—11一24 23：59：59 ；<br />
                4 ． 可 使 用 营 业 点 ： 仅 限 部 分 营 业 点 可 用 <br />
                5 ． 优 惠 券 仅 原 价 购 买 时 可 用 。
              </div>
            </div>
          </el-form-item>
          <div class="title">投放入口设置</div>
          <div style="margin-bottom: 10px">投放入口</div>
          <el-form-item label-width="0" prop="popupUrl">
            <div class="upload-wrapper">
              <el-checkbox
                v-model="formParams.popup"
                label="弹窗"
                :true-label="1"
                :true-value="1"
                :value="1"
                size="large"
                style="margin-right: 20px"
                :checked="formParams.popup === 1"
              />
              上传弹窗图片：

              <div>
                <ImageUploadByType
                  v-model="formParams.popupUrl"
                  :isShowTip="false"
                  uploadType="1"
                  :limit="1"
                  :fileSize="10"
                />
                图片的比例590px*920px,请上传大小不超过10MB,格式为png/jpg/jpeg的文件</div
              >
            </div>
          </el-form-item>
          <el-form-item label-width="0">
            <el-checkbox
              v-model="formParams.couponCentre"
              label="领券中心（是否允许优惠券公开展示在领券中心）"
              size="large"
              :true-label="1"
              :true-value="1"
              :false-value="0"
              :false-label="0"
              style="margin-right: 20px"
              :checked="formParams.couponCentre === 1"
            />
          </el-form-item>
          <div class="title" style="margin-top: 10px">分享设置</div>
          <el-form-item label="分享标题" prop="shareTitle">
            <el-input
              v-model="formParams.shareTitle"
              placeholder="请输入标题名称，最多20字"
              maxlength="20"
              clearable
              input-style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="上传图片" prop="shareImg">
            <div>
              <ImageUploadByType
                v-model="formParams.shareImg"
                :isShowTip="false"
                uploadType="1"
                :limit="1"
                :fileSize="10"
              />
              请上传大小不超过10MB,格式为png/jpg/jpeg的文件,图片的比例为5:4,如500px*400px</div
            >
          </el-form-item>
          <div class="title">活动设置</div>
          <el-form-item label-width="0" prop="setting">
            <el-checkbox
              label="活动设置"
              v-model="formParams.setting"
              size="large"
              :true-label="1"
              :true-value="1"
              :value="1"
              style="margin-right: 20px"
              :checked="formParams.setting === 1"
            />
          </el-form-item>
          <div v-if="formParams.setting">
            <el-form-item
              :required="formParams.setting === 1"
              label="上传背景"
              prop="backgroundImg"
            >
              <div
                ><ImageUploadByType
                  v-model="formParams.backgroundImg"
                  :isShowTip="false"
                  uploadType="1"
                  :limit="1"
                  :fileSize="10"
                />请上传 大小不超过10MB，格式为png/jpg/jpeg的文件，图片推荐尺寸750px*2288px</div
              >
            </el-form-item>
            <el-form-item :required="formParams.setting === 1" label="按钮文字" prop="buttonName">
              <el-input
                v-model="formParams.buttonName"
                placeholder="请输入按钮文字，最多10字"
                maxlength="10"
                clearable
                input-style="width: 240px"
              />
            </el-form-item>
            <el-form-item :required="formParams.setting === 1" label="活动规则" prop="activityRule">
              <div style="width: 100%">
                <el-input
                  v-model="formParams.activityRule"
                  style="width: 300px"
                  :autosize="{ minRows: 3, maxRows: 8 }"
                  type="textarea"
                  maxlength="1000"
                  placeholder="请输入内容"
                  show-word-limit
                />
              </div>
            </el-form-item>
          </div>
        </el-form>
      </el-scrollbar>
    </div>
  </el-dialog>
</template>

<script setup>
import { getComboListApi, getCouponDetailApi, getPositionListApi } from '@/api/marketing/activity'
import { formatTexarea } from '@/utils/tools'

const TEXT_INFO =
  '1．满减优惠券；\n2．部分订单商品金额满12元可用；\n3．有效期至2023—11一24 23：59：59；\n4．可使用营业点：仅限部分营业点可用点击查看详情\n5．优惠券仅原价购买时可用。'

const scrollRef = ref(null)
const formRef = ref(null)

const goodsOptions = ref([])
const positionOptions = ref([])

const visible = ref(false)
const title = ref('')

const formParams = reactive({ symk: '', resource: '' })

/** 复制代码成功 */
function copyTextSuccess() {
  ElMessage({
    message: '复制成功',
    type: 'success'
  })
}

function onClose() {
  scrollRef.value?.setScrollTop(0)
  visible.value = false
}

function initDeatil(detail) {
  Object.keys(detail).map((i) => {
    formParams[i] = detail[i]
  })
  formParams.positionIdList = detail.position === 1 ? detail.positionIdList : ''
  formParams.comboIdList = detail.combo === 1 ? detail.comboIdList : ''
  if (formParams.type === 3 && formParams.combo === 1) {
    formParams.comboIdList = formParams.comboIdList[0]
  }
  if (detail.validDays) {
    formParams.yongquanshijianRadio = 1
    formParams.activityTime = ''
  } else {
    formParams.yongquanshijianRadio = 0
    formParams.activityTime = [detail.validStartTime, detail.validEndTime]
    formParams.validDays = null
  }
  formParams.symkValue = detail.threshold ? detail.threshold : null
  formParams.threshold = detail.threshold ? 1 : 0
  // 优惠内容
  if (formParams.type === 1) {
    formParams.discountMj = detail.discounts
  } else if (formParams.type === 2) {
    formParams.discountZk = detail.discounts
  } else {
    formParams.discountMj = detail.discountsType === 1 ? detail.discounts : null
    formParams.discountZk = detail.discountsType === 2 ? detail.discounts : null
  }
  formParams.popupUrl = detail.popupUrl ? [{ url: detail.popupUrl }] : ''
  formParams.shareImg = detail.shareImg ? [{ url: detail.shareImg }] : ''
  formParams.backgroundImg = detail.backgroundImg ? [{ url: detail.backgroundImg }] : ''
  formParams.rule = formatTexarea(detail.rule, 1)
  formParams.activityRule = formatTexarea(detail.activityRule, 1)
}

function getPositions() {
  getPositionListApi().then((res) => {
    positionOptions.value = res.data || []
  })
}
function getGoods() {
  getComboListApi().then((res) => {
    goodsOptions.value = res.data || []
  })
}

function init(val, couponId) {
  title.value = val + '详情'
  getCouponDetailApi({ couponId }).then((res) => {
    initDeatil(res.data || {})
    visible.value = true
    getPositions()
    getGoods()
  })
}

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  transform: translate3d(0, -20px, 0);
  .title {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
  }
  .textarea-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .textarea-info {
    line-height: 18px;
  }
  .upload-wrapper {
    display: flex;
    align-items: start;
  }
  .el-checkbox.el-checkbox--large {
    height: 32px;
  }
}
.el-radio-group .el-radio {
  width: 100%;
}
::v-deep .el-upload-list__item {
  transition: none !important;
}
</style>
